<template>
	<view class="couponsPage">
		<!-- 活动规则 -->
		<view class="activeRules">
			<view class="title">
				活动规则
				<image class="bg"
					src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"></image>
			</view>
			<view class="illustrate">说明</view>
			<view class="content">
				邀请新用户，新用户首月消费根据梯度，获得现金奖励，消费
				越多奖励越多</view>
		</view>
		<view v-for="(item,index) in marketSpreadFirstMonthConsumerVoList" :key="index">
			<view class="stage">
				<view class="title"> {{ item.stageName }} </view>
				<view class="ruless" style="margin-top: 18rpx">
					<view style="color: #606266; font-size: 26rpx">订单实际消费</view>
					<view style="color: #fc724c; font-size: 26rpx">{{ item.requiredActualPaymentSmall }}
						{{'<'}}{{ item.requiredActualPaymentBig }}
					</view>
				</view>
				<view class="ruless" style="margin-top: 10rpx">
					<view style="color: #606266; font-size: 26rpx">抽佣比例</view>
					<view style="color: #fc724c; font-size: 26rpx">{{item.rebateFee}}%</view>
				</view>
			</view>
			<view class="rewardBox" :style="{ backgroundImage: 'url(' + jdbgURL + ')' }">
				<view style="height: 280rpx;" v-if="!item.marketCouponVoList||item.marketCouponVoList.length == 0">
					暂无数据
				</view>
				<view class="integralCouponList" v-else>
					<view class="integralCouponItem" v-for="(citem,cindex) in item.marketCouponVoList" :key="cindex"
						:style="{ backgroundImage: 'url(' + integralBg + ')' }" v-if='cindex<3'>
						<view>￥{{ citem.couponQuota }}</view>
						<view>{{ citem.couponTypeStr }}</view>
					</view>
				</view>
				<view style="height: 140rpx;" v-if="!item.marketCardVoList||item.marketCardVoList.length == 0">
					暂无数据
				</view>
				<view class="cashCouponList" v-else>
					<view class="cashCouponItem" v-for="(mitem,mindex) in item.marketCardVoList" :key="mindex"
						:style="{ backgroundImage: 'url(' + redBg + ')','margin-bottom':mindex<3?'40rpx':''}">
						<view>{{ mitem.cardTypeStr }}</view>
						<view>￥{{ mitem.cardQuota }}</view>
						<view>{{ mitem.cardNotApplyCause }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="stage" style="margin-top: 18rpx">
        <view class="title"> 阶段二 </view>
        <view class="ruless" style="margin-top: 18rpx">
            <view style="color: #606266; font-size: 26rpx">订单实际消费</view>
            <view style="color: #fc724c; font-size: 26rpx">＞5000</view>
        </view>
        <view class="ruless" style="margin-top: 10rpx">
            <view style="color: #606266; font-size: 26rpx">抽佣比例</view>
            <view style="color: #fc724c; font-size: 26rpx">25%</view>
        </view>
    </view>
    <view class="stage" style="margin-top: 18rpx">
        <view class="title"> 阶段三 </view>
        <view class="ruless" style="margin-top: 18rpx">
            <view style="color: #606266; font-size: 26rpx">订单实际消费</view>
            <view style="color: #fc724c; font-size: 26rpx">＞9000</view>
        </view>
        <view class="ruless" style="margin-top: 10rpx">
            <view style="color: #606266; font-size: 26rpx">抽佣比例</view>
            <view style="color: #fc724c; font-size: 26rpx">35%</view>
        </view>
    </view> -->
		<view style="width: 100%; height: 200rpx"></view>
		<view class="bottomBtn">
			<view class="button" :style="{ backgroundColor: defaultColor }" @tap="goPage">
				{{detailInfo.auditStatus == 0? "查看审核详情": detailInfo.auditStatus === 2? "查看原因并重新申请": "立即申请"}}
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		getSpreadRuleType
	} from "@/api/marketing/invitation";
	var promotion_1 = require("@/api/marketing/promotion");
	const {
		getRule,
		getReduceRule,
		auditDetail
	} = promotion_1;
	export default {
		data() {
			return {
				couponShow: true,
				taskImg2: app.globalData.imgUrl + '/group1/operateSchemeImage/image/Illustration_2.png',
				integralBg: app.globalData.imgUrl + '/group1/operateSchemeImage/image/integral-bg.png',
				redBg: app.globalData.imgUrl + '/group1/operateSchemeImage/image/Red-bg.png',
				jdbgURL: app.globalData.imgUrl + '/group1/operateSchemeImage/image/jdbg.png',
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				marketSpreadFirstMonthConsumerVoList: [],
				detailInfo: {},
			};
		},
		created() {
			this.getSpreadRuleType()
			this.getAuditDetail()
		},
		methods: {
			goPage() {
				if (this.detailInfo.auditStatus != 200) {
					uni.navigateTo({
						url: "/marketing_page/pages/promotion/apply/details",
					});
				} else {
					uni.navigateTo({
						url: "/marketing_page/pages/promotion/apply/apply",
					});
				}
			},
			async getAuditDetail() {
				auditDetail({
					plUserId: uni.getStorageSync("memberId"),
				}).then((res) => {
					const {
						code,
						data
					} = res;
					// 审核状态：0：待审核；1：审核通过；2：审核拒绝
					if (code == 200) {
						this.setData({
							detailInfo: data || {
								auditStatus: 200
							},
						});
					}
				});
			},
			getSpreadRuleType() {
				getSpreadRuleType(3).then(res => {
					if (res.code == 200) {
						this.marketSpreadFirstMonthConsumerVoList = res.data
							.marketSpreadFirstMonthConsumerVoList || [];
					}
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	.couponsPage {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.topBg {
		width: 100%;
		height: 420rpx;

		.topImg {
			width: 100%;
			height: 100%;
		}
	}

	.activeRules {
		width: 94%;
		//   height: 236rpx;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;

		.title {
			width: 235rpx;
			height: 78rpx;
			font-size: 32rpx;
			line-height: 78rpx;
			text-align: center;
			color: #fff;
			// background: #fc724c;
			position: relative;
			// box-shadow: inset -6rpx -2rpx 9rpx 0rpx rgba(247, 137, 107, 0.702);
			opacity: 1;
			z-index: 1;
		}

		.illustrate {
			padding: 0 32rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 400;
			color: #303133;
			margin-top: 45rpx;
		}

		.content {
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #909399;
			line-height: 24rpx;
			padding-bottom: 40rpx;
		}
	}

	.stage {
		width: 94%;
		height: 226rpx;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;

		.title {
			font-size: 34rpx;
			font-weight: 400;
			color: #303133;
		}

		.ruless {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.rewardBox {
		width: 94%;
		//   min-height: 800rpx;
		padding: 100rpx 40rpx 80rpx 40rpx;
		box-sizing: border-box;
		margin: 24rpx auto 0 auto;
		background-size: 106% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.integralCouponList {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.integralCouponItem {
		width: 200rpx;
		height: 190rpx;
		color: #fc724c;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-right: 20rpx;

		>view:nth-of-type(2) {
			color: #a14b20;
			margin-top: 40rpx;
			font-size: 22rpx;
		}
	}

	.integralCouponItem:nth-child(3n) {
		margin-right: 0;
	}

	.cashCouponList {
		// width: 90%;
		//   height: 400rpx;
		margin: 24rpx auto 0 auto;
		background: #fdf1e5;
		border-radius: 10rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.cashCouponItem {
		width: 137rpx;
		height: 142rpx;
		margin: 0 35rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		>view:nth-of-type(1) {
			color: #a26d35;
			font-size: 20rpx;
		}

		>view:nth-of-type(2) {
			color: #f0703e;
			font-size: 22rpx;
			font-weight: 600;
		}

		>view:nth-of-type(3) {
			color: #fad9b1;
			font-size: 22rpx;
		}
	}

	.bottomBtn {
		width: 100%;
		height: 120rpx;
		background: linear-gradient(360deg, #ffffff 0%, #f4f6f8 99%, #f4f6f8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.button {
			width: 92%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			// background: #1487fa;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		z-index: -1;
	}
</style>